<template>
	<view class='cu-modal' :class='{show: show}' @click='handleClose'>
		<view class='model' @click.stop>
			<view class='title'>修改档案名称</view>
			<view class='name-box'>
				<input v-model='name' type="text" :maxlength="30" placeholder="输入档案新名称 (30字以内)">
			</view>
			<view class='submit' @click='handleSubmit'>确定</view>
		</view>
	</view>
</template>

<script>
	import {opCargo} from '@/api/pet/index/saler'
	export default {
		data() {
			return {
				show: false,
				id: undefined,
				name: ''
			}
		},
		methods: {
			handleOpen(id) {
				this.id = id;
				this.name = ''
				this.show = true
			},
			handleClose() {
				this.show = false;
			},
			handleSubmit() {
				if(!this.name) return uni.showToast({title: '请输入档案名称', icon: 'none'})
				uni.showLoading({mask: true})
				opCargo({
					opid: this.id,
					field: 'recordName',
					value: this.name
				}).then(res => {
					let pages = getCurrentPages();
					let page = pages[pages.length - 1];
					page.$vm.init && page.$vm.init('petArchive')
					uni.showToast({title: '操作成功',icon: 'none'})
					this.handleClose()
				})
			}
		}
	}
</script>

<style scoped lang="scss">
	.model {
		position: absolute;
		left: 50%;
		top: 50%;
		transform: translate(-50%, -50%);
		width: 622rpx;
		padding: 40rpx 48rpx 48rpx 48rpx;
		background: #FFFFFF;
		border-radius: 32rpx;
		border: 1rpx solid #979797;
		text-align: left;
		
		.title {
			font-weight: 600;
			font-size: 32rpx;
			color: var(--h1Color);
			line-height: 45rpx;
			text-align: center;
		}
		
		.name-box {
			margin-top: 40rpx;
			width: 100%;
			height: 92rpx;
			background: #F8F8F8;
			border-radius: 12rpx;
			
			input {
				padding: 0 10rpx;
				width: 100%;
				height: 100%;
				font-size: 26rpx;
			}
		}
		
		.submit {
			margin-top: 50rpx;
			width: 100%;
			height: 80rpx;
			background: var(--primaryGradBg);
			border-radius: 40rpx;
			display: flex;
			align-items: center;
			justify-content: center;
			font-weight: 500;
			font-size: 30rpx;
			color: var(--btnColor);
		}
	}
</style>